<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <div class="filter-container">
        <el-form-item label="日期">
          <el-date-picker type="date" placeholder="选择开始日期" v-model="form.date1"></el-date-picker>---
          <el-date-picker type="date" placeholder="选择结束日期" v-model="form.date2"></el-date-picker>
        </el-form-item>
      </div>

      <h3>In Line Data Select</h3>
      <div class="filter-container">
        <el-form-item label="Technology" class="filter-item">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option key="bbk" label="步步高" value="bbk"></el-option>
            <el-option key="xtc" label="小天才" value="xtc"></el-option>
            <el-option key="imoo" label="imoo" value="imoo"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Product_Id" class="filter-item">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option key="bbk" label="步步高" value="bbk"></el-option>
            <el-option key="xtc" label="小天才" value="xtc"></el-option>
            <el-option key="imoo" label="imoo" value="imoo"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Product_Id" class="filter-item">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option key="bbk" label="步步高" value="bbk"></el-option>
            <el-option key="xtc" label="小天才" value="xtc"></el-option>
            <el-option key="imoo" label="imoo" value="imoo"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Product_Id" class="filter-item">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option key="bbk" label="步步高" value="bbk"></el-option>
            <el-option key="xtc" label="小天才" value="xtc"></el-option>
            <el-option key="imoo" label="imoo" value="imoo"></el-option>
          </el-select>
        </el-form-item>
      </div>

      <h3>FDC Data Select</h3>
      <div class="filter-container">
        <el-form-item label="Technology" class="filter-item">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option key="bbk" label="步步高" value="bbk"></el-option>
            <el-option key="xtc" label="小天才" value="xtc"></el-option>
            <el-option key="imoo" label="imoo" value="imoo"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Product_Id" class="filter-item">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option key="bbk" label="步步高" value="bbk"></el-option>
            <el-option key="xtc" label="小天才" value="xtc"></el-option>
            <el-option key="imoo" label="imoo" value="imoo"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Product_Id" class="filter-item">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option key="bbk" label="步步高" value="bbk"></el-option>
            <el-option key="xtc" label="小天才" value="xtc"></el-option>
            <el-option key="imoo" label="imoo" value="imoo"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Product_Id" class="filter-item">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option key="bbk" label="步步高" value="bbk"></el-option>
            <el-option key="xtc" label="小天才" value="xtc"></el-option>
            <el-option key="imoo" label="imoo" value="imoo"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Product_Id" class="filter-item">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option key="bbk" label="步步高" value="bbk"></el-option>
            <el-option key="xtc" label="小天才" value="xtc"></el-option>
            <el-option key="imoo" label="imoo" value="imoo"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Product_Id" class="filter-item">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option key="bbk" label="步步高" value="bbk"></el-option>
            <el-option key="xtc" label="小天才" value="xtc"></el-option>
            <el-option key="imoo" label="imoo" value="imoo"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Product_Id" class="filter-item">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option key="bbk" label="步步高" value="bbk"></el-option>
            <el-option key="xtc" label="小天才" value="xtc"></el-option>
            <el-option key="imoo" label="imoo" value="imoo"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Product_Id" class="filter-item">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option key="bbk" label="步步高" value="bbk"></el-option>
            <el-option key="xtc" label="小天才" value="xtc"></el-option>
            <el-option key="imoo" label="imoo" value="imoo"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div>
        <el-form-item class="filter-buttonab">
          <el-button type="primary" @click="onSubmit">Run Model</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: true,
        type: ["步步高"],
        resource: "小天才",
        desc: "",
        options: []
      }
    };
  },
  methods: {
    onSubmit() {
      this.$message.success("提交成功！");
    },
  }
};
</script>

<style>
.filter-container {
  padding-top:10px;
  padding-bottom: 20px;

}

.filter-item {
  display: inline-block;
  padding: 10px;
  padding-left: 60px;
}
.filter-buttonab {
  text-align: center;
}
</style>